<style lang="scss" scoped>
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';
.store-area {
	ul.storeContent {
		margin-top: rem(40);
	}
	ul {
		li {
			padding: rem(15) rem(10);
			overflow: hidden;
			background: #fff;
			position: relative;
			border-bottom: 1px solid #efeff4;
			a {
				display: block;
				overflow: hidden;
				position: relative;
			}
			img {
				display: block;
				width: rem(64);
				height: rem(64);
				float: left;
			}
			.bar {
				position: absolute;
				left: 0;
				top: rem(44);
				background: #bbb;
				width: rem(64);
				height: rem(20);
				line-height: rem(20);
				color: #fff;
				font-size: rem(12);
				text-align: center;
			}
			dl {
				padding-left: rem(10);
				vertical-align: top;
				width: rem(290);
				float: left;
				dt {
					font-size: rem(13);
					color: #333;
					margin-top: rem(3);
					b {
						font-weight: normal;
						font-size: rem(16);
						line-height: rem(16);
						color: #333;
						position: relative;
					}
					s {
						position: absolute;
						top: rem(3);
						right: rem(-40);
						background: #03a9f4;
						font-size: rem(9);
						line-height: rem(9);
						color: #fff;
						font-weight: normal;
						padding: rem(2) rem(4);
						border-radius: rem(2);
					}
					span {
						float: right;
						color: #999;
						font-size: rem(13);
					}
				}
				dd {
					line-height: rem(16);
					&:nth-of-type(2) {
						margin-top: rem(5);
					}
					span {
						display: inline-block;
						width: rem(207);
						font-size: rem(12);
						line-height: rem(13);
						color: #999;
					}
					b {
						padding: 0 rem(4);
						margin-right: rem(5);
						border: 1px solid #03A9F4;
						color: #03A9F4;
						font-weight: normal;
						font-size: rem(10);
						border-radius: rem(2);
						line-height: rem(16);
					}
					i {
						font-size: rem(12);
						line-height: rem(13);
						color: #999;
					}
				}
			}
			
		}
	}
	.choose {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 10;
		>.btn {
			height: rem(40);
			line-height: rem(40);
			font-size: rem(12);
			color: #333;
			width: 100%;
			border-bottom: 1px solid #c8c8cc;
			span {
				height: rem(40);
				line-height: rem(40);
				width: 33.33%;
				text-align: center;
				display: block;
				float: left;
				b {
					font-weight: normal;
				}
				&.active {
					color: #03a9f4;
					i {
						color: #03a9f4;
					}
				}
			}
			i {
				display: inline-block;
				padding-left: rem(3);
				margin-left: rem(3);
				color: #999;
				font-size: rem(13)
			}
		}
		ul.choose-content {
			margin: 0;
			li {
				display: none;
				padding: 0;
				margin: 0;
				&.area {
					height: rem(370);
					overflow-y: scroll;
					overflow-x: hidden;
					span {
						display: block;
						width: 100%;
						height: rem(44);
						line-height: rem(44);
						border-bottom: 1px solid #efeff4;
						font-size: rem(14);
						padding: 0 0 0 rem(10);
						margin: 0;
						color: #333;
						position: relative;
						&.active {
							color: #03a9f4;
							background: #fafbfc;
							i {
								color: #03a9f4;
								visibility: visible;
							}
						}
						i {
							display: block;
							visibility: hidden;
							position: absolute;
							right: rem(10);
							top: rem(0);
							font-size: rem(13);
							line-height: rem(44);
						}
					}
				}
				&.serviceType  {
					.serviceTypeContent{
						padding: rem(15) rem(2) rem(5) rem(2);
						border-bottom: 1px solid #c8c8cc;
						overflow: hidden;
						span {
							width: rem(110);
							height: rem(36);
							line-height: rem(36);
							border: 1px solid #cccccc;
							display: block;
							float: left;
							margin-left: rem(10);
							margin-bottom: rem(10);
							text-align: center;
							font-size: rem(14);
							border-radius: rem(3);
							&.active {
								border: 1px solid #03a9f4;
								color: #03a9f4;
							}
						}
					}
					.btn {
						width: 100%;
						overflow: hidden;
						div {
							width: 50%;
							height: rem(40);
							line-height: rem(40);
							font-size: rem(16);
							color: #333;
							float: left;
							text-align: center;
							&:nth-of-type(2) {
								background: #03A9F4;
								color: #fff;
							}
						}
					}
					
				}
				&.valueAddedService  {
					.valueAddedServiceContent{
						padding: rem(15) rem(2) rem(5) rem(2);
						border-bottom: 1px solid #c8c8cc;
						overflow: hidden;
						span {
							width: rem(110);
							height: rem(36);
							line-height: rem(36);
							border: 1px solid #cccccc;
							display: block;
							float: left;
							margin-left: rem(10);
							margin-bottom: rem(10);
							text-align: center;
							font-size: rem(14);
							border-radius: rem(3);
							&.active {
								border: 1px solid #03a9f4;
								color: #03a9f4;
							}
						}
					}
					.btn {
						width: 100%;
						overflow: hidden;
						div {
							width: 50%;
							height: rem(40);
							line-height: rem(40);
							font-size: rem(16);
							color: #333;
							float: left;
							text-align: center;
							&:nth-of-type(2) {
								background: #03A9F4;
								color: #fff;
							}
						}
					}
					
				}
			}
		}
	}
}

.store-empty {
	width: 100%;
	font-size: rem(14);
	color: #666;
	padding-top: rem(300);
	text-align: center;
}
.store-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.3);
}
</style>
<template>
	<div class="store-list">
		<div class="store-area" v-cloak>
			<div class="choose">
				<div class="btn">
					<span v-for='tab in tabList' @click="tabChange($event)"><b>{{tab}}</b><i class="iconfont icon-arrow-down"></i></span>
				</div>
				<ul class="choose-content">
					<li class="area" id="wrapper">
						<div id="scroller">
							<span v-for='area in areaList' @click='areaChange($event)' areaId={{area.distId}} :class="{'active':$index==0}">{{area.distName}}<i class="iconfont icon-checked"></i></span>
						</div>
					</li>
					<li class="serviceType">
						<div class="serviceTypeContent"><span v-for='serviceType in serviceTypeList' @click='serviceTypeChange($event)' serviceId={{serviceType.code}}>{{serviceType.name}}</span></div>
						<div class="btn">
							<div @click='cancel()'>重置</div>
							<div @click='confirm()'>确定</div>
						</div>
					</li>
					<li class="valueAddedService">
						<div class="valueAddedServiceContent"><span v-for='valueAddedService in valueAddedServiceList' @click='valueAddedServiceChange($event)' serviceId={{valueAddedService.code}}>{{valueAddedService.name}}</span></div>
						<div class="btn">
							<div @click='valueAddedServiceRest()'>重置</div>
							<div @click='valueAddedServiceChange()'>确定</div>
						</div>
					</li>
				</ul>
			</div>

			<ul class="storeContent">
				<li  v-for="store in storeList"  storeId={{store.storeId}} >
					<a href="/store/detail_{{store.storeId}}.htm">
						<img data-original="{{store.image1}}" src=""+CMSIMAGEDOMAIN +"/cms/wap/resource/chexiangjiaM/category/store/images/default-store-asd2f8f6sgg01.png" />
						<div class="bar" v-if='store.storeStatus==3'>暂不营业</div>	
						<dl>
							<dt>
		                        <b>{{store.storeName}}<s v-if='store.storeId==storeIdLast'>去过</s></b>
		                        <span v-if="(store.distanceFromMe)>0 && (store.distanceFromMe)<1000">
		                           {{parseFloat(store.distanceFromMe).toFixed(1)}}m
		                        </span>
		                        <span v-if="(store.distanceFromMe)>1000">
		                        	{{parseFloat(store.distanceFromMe/1000).toFixed(1)}}km
		                        </span>
                       
                   		    </dt>
							<dd>
								<b v-for='serviceType in store.serviceScopeMap '>{{serviceType}}</b>
							</dd>
							<dd>
								<span class="text-overflow">{{store.address}}</span>
							</dd>
						</dl>
					</a>
				</li>
			</ul>
			<div class="store-empty" style="display: none;">没有找到合适的门店1</div>
		</div>
		<div id="store-mask" class="store-mask" style="display: none;"></div>
	</div>
</template>
<script>
// remainArray,sortDistNameNumber,initScopeInfo,getPageAllDistName,getPageAllScope,getHidenStoreId
	import $ from '../../libs/jqmin';
	import {remainArray,sortDistNameNumber,initScopeInfo,getPageAllDistName,getPageAllScope,getHidenStoreId } from '../../libs/cxjcitystore';
	export default {
		components: {
		},
		data () {
			return {
				storeList: [],
				area: '',
				targetUrl: '',
				tabList: ["全部区域", "服务类型","增值服务"], 
				storeIdLast:'',
				selectedDistIdArray: [],
				selectedScopeCodeArray: [],
				valueAddedServiceArray:[],
				toggleFlag:1
			}
		},
		methods: {
			tabChange: function(event) {
				var selectedScopeCodeArray = this.selectedScopeCodeArray;
				var el = event.currentTarget;
				var index = $(el).index();
				$('.choose-content li').eq(index).toggle().siblings().hide();
				$(el).toggleClass('active').siblings().removeClass('active');
				$('.btn span').find('i').removeClass().addClass('iconfont icon-arrow-down');
				$('.btn span.active').find('i').removeClass().addClass('iconfont icon-arrow-up');
				if ($(el).hasClass('active')) {
					$('#store-mask').show();
				}else{
					$('#store-mask').hide();
				}
				$('.serviceTypeContent span').removeClass('active');
				for(var i=0;i <= selectedScopeCodeArray.length-1;i++){
					$('.serviceTypeContent span').each(function () {
						if ($(this).attr('serviceid')==selectedScopeCodeArray[i]) {
							$(this).addClass('active');
						}
					})
				}
			},
			areaChange: function(event) {
				var storeList = this.storeList;
				var selectedScopeCodeArray = this.selectedScopeCodeArray;
				var selectedDistIdArray = [];
				var el = event.currentTarget;
				$(el).addClass('active').siblings().removeClass('active');
				//添加到区域数组内
				var areaChoosed = Number($(el).attr('areaid'));
				if(areaChoosed != 0) {
					selectedDistIdArray.push(areaChoosed);
					this.selectedDistIdArray = selectedDistIdArray;
				}
				$('.store-mask').fadeOut();
				$('.choose-content li').hide();

				//得到显示的storeId
				var serviceHideArray = getHidenStoreId(selectedDistIdArray, selectedScopeCodeArray, storeList);
				$('.storeContent li').hide();
				for(var i = 0; i < serviceHideArray.length; i++) {
					$('.storeContent li').each(function() {
						if($(this).attr('storeid') == serviceHideArray[i]) {
							$(this).show();
						}
					})
				}
				$('.choose .btn span').removeClass('active').find('i').removeClass().addClass('iconfont icon-arrow-down');
				var tabText = $('li.area span.active').text();
				$('.btn span:nth-of-type(1) b').text(tabText);
				//筛选后没有符合空页面
				if ($('.storeContent').height()==0) {
					$('.store-empty').show();
				}else{
					$('.store-empty').hide();
				}
			},
			serviceTypeChange: function(event) {
				var el = event.currentTarget;
				$(el).toggleClass('active');
			},
			cancel: function() {
				$('.serviceTypeContent span').removeClass('active');
				this.selectedScopeCodeArray = [];
			},
			confirm: function() {
				var selectedDistIdArray = this.selectedDistIdArray;
				var storeList = this.storeList;
				var selectedScopeCodeArray = [];
				$('.serviceTypeContent .active').each(function() {
						var serviceid = $(this).attr('serviceid');
						selectedScopeCodeArray.push(serviceid);
						this.selectedScopeCodeArray = selectedScopeCodeArray;
				});
					//得到不显示的storeId
				var serviceHideArray = getHidenStoreId(selectedDistIdArray, selectedScopeCodeArray, storeList);
				$('.store-area li').hide();
				for(var i = 0; i < serviceHideArray.length; i++) {
					$('.storeContent li').each(function() {
						if($(this).attr('storeid') == serviceHideArray[i]) {
							$(this).show();
						}

					})
				}
				//关闭遮罩和选择层
				$('.store-mask').fadeOut();
				$('.choose-content li').hide();
				$('.choose .btn span').removeClass('active').find('i').removeClass().addClass('iconfont icon-arrow-down');
				//筛选后没有符合空页面
				if ($('.storeContent').height()==0) {
					$('.store-empty').show();
				}else{
					$('.store-empty').hide();
				}
			},
			valueAddedServiceChange: function (event) {
				var el = event.currentTarget;
				$(el).toggleClass('active');
			},
			valueAddedServiceRest: function() {
				$('.valueAddedServiceContent span').removeClass('active');
				this.valueAddedServiceArray = [];
			},
			valueAddedServiceConfirm: function (event) {
				
			}
		},
		computed : {
			areaList: function() {
				var areaList =  getPageAllDistName(this.storeList, this.area);
				console.log("==areaList==");
				console.log(areaList);
				return areaList;
			},
			serviceTypeList: function() {
				return getPageAllScope(this.storeList);
			},
			valueAddedServiceList: function () {
				return [
					{name:"不限",code:"all"},
					{name:"保险业务", code:"bxyw"}
				];
			}
		},
		ready () {
			console.log("==ready==");
			this.area = '';
			this.storeIdLast = typeof storeIdLast!='undefined'?storeIdLast:'';
			this.$http({url: '/static/json/store-list.json', data:{'param1': 0}, emulateJSON: true, method: 'GET'}).then(function (response) {
	            console.log("response"+ JSON.stringify(response.body));
	            this.storeList= response.body;
	            
	       	});
		}
	}
</script>
